<template>
  <div class="songListPage">
    <el-container>
      <el-aside width="280px" v-if="playlist">
        <div class="image">
          <img
            :src="
              playlist.coverImgUrl + '?imageView=1&type=webp&thumbnail=246x0'
            "
            alt=""
          />
        </div>
        <p class="name">{{ playlist.name }}</p>
        <p class="description">{{ playlist.description }}</p>

        <div class="control">
          <div class="item like">
            <svg
              t="1648282730083"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6187"
              width="200"
              height="200"
              @click="like"
            >
              <path
                d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
                fill=""
                p-id="6188"
                class="fingerCursor"
              ></path>
              <path
                d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
                :fill="return_like_color()"
                p-id="6189"
                class="fingerCursor"
              ></path>
              <!-- fill="#FF5F5F" -->
              <path
                d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
                fill="#FFFFFF"
                p-id="6190"
              ></path>
            </svg>
          </div>
          <div class="item play">
            <svg
              t="1648803927622"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3041"
              width="200"
              height="200"
              @click="playAll(tracks)"
            >
              <path
                d="M512 78.8c-239.3 0-433.2 194-433.2 433.2 0 239.3 194 433.2 433.2 433.2 239.3 0 433.2-194 433.2-433.2 0.1-239.2-193.9-433.2-433.2-433.2z m183.3 447.9L455.1 720c-12.3 9.9-30.5 1.1-30.5-14.6V318.7c0-15.7 18.2-24.5 30.5-14.6l240.2 193.4c9.4 7.5 9.4 21.7 0 29.2z"
                p-id="3042"
                class="fingerCursor"
                fill="#ffffff"
              ></path>
            </svg>
          </div>
          <div class="item knock_knock">
            <svg
              t="1648803955969"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4151"
              width="200"
              height="200"
              @click="ForFun"
            >
              <path
                d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                p-id="4152"
                fill="#ffffff"
              ></path>
            </svg>
          </div>
        </div>
      </el-aside>
      <el-main>
        <!-- {{ $route.params.id }} -->
        <ul class="song-list">
          <song-item
            v-for="(item, index) in tracks"
            :key="index"
            class="song-item"
            :index="index"
            :song="item"
            :long="true"
            :control="true"
            :noDeleteSong="true"
          ></song-item>
        </ul>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import songItem from "../../components/songItem/index.vue";
import { Message } from "element-ui";
import { localStorage } from "../../request";
import store from "../../store";

export default {
  name: "songListPage",

  data() {
    return {
      playlist: null,
      tracks: null,
      Favorite_SongsList: null,
    };
  },
  computed: {
    currentEmail: function () {
      return store.state.Counter.currentEmail;
    },
  },
  components: {
    songItem,
  },

  created() {
    console.log(this.$route.params.id);
    // 获取当前歌单的歌曲
    axios
      .get(
        "https://apis.netstart.cn/music/playlist/detail?id=" +
          this.$route.params.id
      )
      .then((res) => {
        // console.log(res.data.playlist);
        this.playlist = res.data.playlist;
        this.tracks = res.data.playlist.tracks;
      });

    localStorage.getItem("email:" + this.currentEmail).then((res) => {
      let data = res.data.Favorite_SongsList;
      this.Favorite_SongsList = data;
    });
  },
  mounted() {},

  methods: {
    like() {
      localStorage.getItem("email:" + this.currentEmail).then((res) => {
        let data = res.data.Favorite_SongsList;
        let index = data.findIndex((item) => {
          return this.playlist.id === item.id;
        });
        if (index === -1) {
          data.push(this.playlist);
          this.Favorite_SongsList = data;
          localStorage
            .setItem("email:" + this.currentEmail, {
              ...res,
              data: {
                ...res.data,
                Favorite_SongsList: data,
              },
            })
            .then(() => {
              store.commit("need_reload_DB", true);
            });
        } else {
          data.splice(index, 1);
          this.Favorite_SongsList = data;
          localStorage
            .setItem("email:" + this.currentEmail, {
              ...res,
              data: {
                ...res.data,
                Favorite_SongsList: data,
              },
            })
            .then(() => {
              store.commit("need_reload_DB", true);
            });
        }
      });
    },
    return_like_color() {
      if (this.Favorite_SongsList) {
        let index = this.Favorite_SongsList.findIndex((item) => {
          return item.id === this.playlist.id;
        });
        return index !== -1 ? "#ff0000" : "#ffffff";
      } else {
        return "#ffffff";
      }
    },
    playAll(tracks) {
      console.log(tracks);
      store.commit("upload_playing_list", tracks);
    },
    ForFun() {
      Message.success("诶！恭喜你，寿命+1天");
    },
  },
};
</script>

<style lang="scss" scoped>
.songListPage {
  color: #ffffff;
  width: 100%;

  .el-container {
    height: 100%;

    .el-aside {
      margin-top: 20px;
      margin-left: 20px;
      margin-bottom: 20px;
      background-color: rgba(243, 229, 229, 0.2);
      border-radius: 10px;
      padding: 10px;
      overflow-y: auto;
      position: relative;

      .control {
        position: absolute;
        top: 270px;
        right: 18px;
        width: 90px;
        height: 90px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;

        .item {
          width: 45px;
          height: 45px;
          background-color: rgba($color: #000000, $alpha: 0.4);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10px;
          border: 1px solid #ffffff;

          svg {
            width: 90%;
            height: 90%;
          }

          &.like {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
          }
          &.play {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-left: 0;
            border-bottom: 0;
          }
          &.knock_knock {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top: 0;
          }
        }
      }

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        // background-color: #f90;
        // background-image: -webkit-linear-gradient(
        //     45deg,
        //     rgba(255, 255, 255, 0.2) 25%,
        //     transparent 25%,
        //     transparent 50%,
        //     rgba(255, 255, 255, 0.2) 50%,
        //     rgba(255, 255, 255, 0.2) 75%,
        //     transparent 75%,
        //     transparent
        // );
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        // background: #ededed;
      }

      .image {
        border-radius: 10px;
        text-align: center;

        img {
          border-radius: 10px;
        }
      }

      p {
        margin: 0;
        margin-top: 10px;
        padding-left: 10px;
      }

      .name {
        font-size: 18px;
        width: 170px;
      }

      .description {
        font-size: 12px;
        width: 210px;
        height: 170px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 1px;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          // background-color: #f90;
          // background-image: -webkit-linear-gradient(
          //     45deg,
          //     rgba(255, 255, 255, 0.2) 25%,
          //     transparent 25%,
          //     transparent 50%,
          //     rgba(255, 255, 255, 0.2) 50%,
          //     rgba(255, 255, 255, 0.2) 75%,
          //     transparent 75%,
          //     transparent
          // );
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          // background: #ededed;
        }
      }
    }

    .el-main {
      background-color: rgba(243, 229, 229, 0.2);
      margin: 20px;
      border-radius: 10px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        // background-color: #f90;
        // background-image: -webkit-linear-gradient(
        //     45deg,
        //     rgba(255, 255, 255, 0.2) 25%,
        //     transparent 25%,
        //     transparent 50%,
        //     rgba(255, 255, 255, 0.2) 50%,
        //     rgba(255, 255, 255, 0.2) 75%,
        //     transparent 75%,
        //     transparent
        // );
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        // background: #ededed;
      }
    }
  }
}
</style>